<template>
  <div>
    auth
    <p>{{num}} ---> {{evenOrOdd}}</p>
    <button @click="changeCount">增加count</button> <button @click="triggerChangeCount">异步增加count</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  data () {
    return {
      // count: '🌟'
    }
  },
  methods: {
    ...mapMutations([
      'changeCount'
    ]),
    ...mapActions([
      'triggerChangeCount'
    ])
  },

  // 最常用
  computed: {
    // ...mapState([
    //   'count'
    // ]),
    ...mapState({
      num: state => state.numMudule.count
    }),
    ...mapGetters([
      'evenOrOdd'
    ])
  }

  // 如果这个组件中没有其他的计算属性，就可以像下面这样写
  // computed: mapState(['count'])

  //
  // computed: mapState({
  // 如果你的组件data中已经定义了某个变量了，映射过来需要vuex中state的名字，那就可以用下面两种
  // num: state => state.count,
  // num: 'count'

  // 如果vuex中的state需要和组件data中的数据要组合实现一些逻辑，就用下面这种
  // num: function (state) {
  //   return state.count + this.count
  // }
  // })
}
</script>

<style>

</style>
